<template>
  <div
    :class="className"
    :style="{ height: height, width: width }"
    v-loading="loading"
  />
</template>

<script>
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    option: {
      type: Object,
      default: () => {},
      required: true,
    },
    autoShowToolTip: {
      type: Boolean,
      default: false,
    },
    dynamicData: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      chart: null,
      loading: true,
      timer: null,
      tooltipDataIndex: 0, //tooltip轮播位置
      dataIndex: 0, //柱子的轮播位置
    };
  },
  watch: {
    option: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          if (this.timer) {
            clearTimeout(this.timer);
          }
          this.timer = null;
          this.tooltipDataIndex = 0;
          this.dataIndex = 0;

          this.initChart();
        }
      },
    },
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
    if (this.timer) {
      clearTimeout(this.timer);
    }
    this.timer = null;
    this.tooltipDataIndex = 0;
    this.dataIndex = 0;
  },
  methods: {
    initChart() {
      if (!this.$el) {
        return;
      }
      if (!this.chart) {
        this.chart = this.$echarts.init(this.$el);
      }

      // this.initEvent();
      if (this.dynamicData && typeof this.dynamicData == "number") {
        this.setAutoData();
        this.setTimer();
      } else {
        this.setOptions();

        this.setTimer();
      }
    },
    // initEvent() {
    //   this.chart.on(
    //     "mouseover",
    //     { componentType: "series", seriesType: "bar" },
    //     (e) => {
    //       console.log(111);
    //       // if (this.timer) {
    //       //   clearTimeout(this.timer);
    //       // }
    //     }
    //   );
    //   this.chart.on(
    //     "mouseout",
    //     { componentType: "series", seriesType: "bar" },
    //     (e) => {
    //       console.log(222);
    //       // this.setTimer();
    //     }
    //   );
    // },
    setOptions(option) {
      option = option || this.option;
      this.chart.setOption({
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        ...option,
      });

      this.loading = false;
    },
    setTimer() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (!this.option) {
        return;
      }
      this.timer = setTimeout(() => {
        // 自动轮播tooltip
        if (this.autoShowToolTip == true) {
          this.chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: this.tooltipDataIndex,
          });
          this.tooltipDataIndex++;
          if (this.tooltipDataIndex >= this.option.xAxis?.data?.length) {
            this.tooltipDataIndex = 0;
          }
        }
        // 自动轮播图表
        this.setAutoData();
        this.setTimer();
      }, 2000);
    },
    setAutoData() {
      if (
        this.dynamicData &&
        typeof this.dynamicData == "number" &&
        this.option
      ) {
        let option = this.deepCopyData(this.option);
        let end = this.dataIndex + this.dynamicData;
        option.xAxis.data = this.option.xAxis.data.slice(this.dataIndex, end);
        for (let i = 0; i < option.series.length; i++) {
          option.series[i].data = this.option.series[i].data.slice(
            this.dataIndex,
            end
          );
        }
        this.dataIndex++;
        if (
          this.dataIndex + this.dynamicData >
          this.option.series[0].data.length
        ) {
          this.dataIndex = 0;
        }
        this.setOptions(option);
      }
    },
  },
};
</script>
